<div class="content">

    <div class="search-bar">
        <nz-input-group [nzSuffix]="suffixIconSearch">
            <input type="text" nz-input placeholder="搜索页面模块权限" [(ngModel)]="searchInput"
                (ngModelChange)="searchInputChange()" />
        </nz-input-group>
        <ng-template #suffixIconSearch>
            <i class="iconfont icon-search-2-line"></i>
        </ng-template>
    </div>

    <div nz-row class="border-a" *ngIf="!mode">
        <div nz-col [nzSpan]="6" class="border-r">
            <div class="tmp-item" [ngClass]="{'selected': item.selected}" *ngFor="let item of leftTemplateList"
                (click)="leftTemplateClick(item)">
                {{item.name}}
            </div>
        </div>
        <div nz-col [nzSpan]="18" class="com-body">
            <div class="header">
                {{selectedLeftTemplate?.name}}
                <span class="sub-title">组件数量：{{tmpComItems.length}}</span>
                <div class="spacer"></div>
                <a nz-button nzType="link" (click)="tmpSelectedAll()">全选</a>
                <a nz-button nzType="link" (click)="tmpCancelSelected()">反选</a>
            </div>

            <ng-container *ngFor="let comItem of tmpComItems">
                <div class="com-item" nz-row
                    *ngIf="comItem.component.perimitConfig && comItem.component.perimitConfig.length > 0">
                    <div nz-col [nzSpan]="8">
                        <label nz-checkbox [(ngModel)]="$any(comItem).permitAllChecked"
                            (ngModelChange)="comPermitAllChecked(comItem)">
                            {{comItem.component.name}}
                        </label>
                    </div>
                    <div nz-col nzOffset="4" [nzSpan]="12" class="com-permits">
                        <div *ngFor="let comItemPermit of comItem.component.perimitConfig" class="check-label">
                            <label nz-checkbox [(ngModel)]="comItemPermit.permitSelected">
                                {{comItemPermit.permitId}}
                            </label>
                        </div>
                    </div>
                </div>
            </ng-container>

        </div>
    </div>

    <div nz-row class="border-a" *ngIf="mode == 'admin'">
        <div nz-col [nzSpan]="6" class="border-r">
            <div class="tmp-item selected">
                超级权限
            </div>
        </div>
        <div nz-col [nzSpan]="18" class="com-body">
            <div class="com-item" nz-row>
                <div nz-col [nzSpan]="24">
                    <label nz-checkbox [(ngModel)]="historyEdit">
                        历史数据修改
                    </label>
                </div>
            </div>

            <div class="com-item" nz-row>
                <div nz-col [nzSpan]="24">
                    <label nz-checkbox [(ngModel)]="dataQuery">
                        所有数据查看
                    </label>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="floor">
    <button nz-button nzType="default" (click)="cancel()">取消</button>
    <button nz-button nzType="primary" (click)="ok()">确定</button>
</div>